<template>
  <div class="app">
    <video autoplay muted loop class="background-video">
        <source src="`./assets/video/Steamworks.mp4`" type="video/mp4" />
      </video>
    <RouterView />
  </div>
</template>

<script>
import { RouterView } from 'vue-router';



export default {
  name: 'App',
  components: {
    RouterView
  },
  data() {
    return {
      Background: 'Steamworks' // 默认视频
    };
  },
  mounted() {
    document.title = '教务系统';
    // 加载主题偏好
    const theme = localStorage.getItem('theme');
    if (theme === 'dark') {
      
      document.body.classList.add('dark-theme');
      const html = document.querySelector('html')
      if (html) {
        html.classList.add('dark')
        html.classList.remove('light')
      }
    }
  }
}

</script>

<style>

.app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.dark-theme {
  background-color: #121212;
  color: #ffffff;
}

.dark-theme .el-container {
  background-color: #1e1e1e;
}

.dark-theme .el-header {
  background-color: #1e1e1e;
  color: #ffffff;
}

.dark-theme .el-menu {
  .el-sub-menu{
    background-color: #1e1e1e;
    color: #ffffff;
    
  }
  background-color: #1e1e1e;
  color: #ffffff;
}
.dark-theme .el-menu-item {
  color: #ffffff;
}
.dark-theme .el-aside {
  background-color: #1e1e1e;
  .el-header {
    background-color: #2b2a2a;
    color: #ffffff;
  }
}
.dark-theme .el-main {
  background-color: #1e1e1e;
}
.dark-theme .el-card {
  background-color: #1e1e1e;
}
.dark-theme .el-text {
  color: #ffffff;
}
.dark-theme .el-icon {
  color: #ffffff;
}
.dark-theme .el-text {
  color: #ffffff;
}
</style>